<template>
	<div> 
		<!-- <so-header :seller="headerTitle"></so-header> -->
    <setHeader :title="headerTitle"></setHeader>
    <div class="pagecontent" style="background-color: #fff;">
        <div class="infoDiv">
          <h4>欢迎您<br/>
          为了更好的使用本平台<br/>
          您需要绑定您目前就职或创办的企业</h4>
        </div>
        <div style="padding: 0.2rem">
            <div class="el-main-revie bindInput">
              <mt-search 
                autofocus 
                v-model="value"
                cancel-text=""
                placeholder="请输入企业名称"
                >
                <mt-cell
                  v-for="(item,index) in defaultResult"
                  :key="index"
                  :value="item.name"
                  @click.native="getSelect(item.name)"
                  >
                </mt-cell>
              </mt-search>
              <div style="display:none" :model="seac"></div>
            </div>
            <!-- <mt-button type="primary"  class="Bind el-long-button el-long-create-button el-long-user-button" size="normal" @click.native="goTo">下一步</mt-button>
            <mt-button type="primary"  class="Bind2 el-long-button el-long-create-button el-long-user-button" size="normal" @click.native="noBind">暂不绑定</mt-button> -->
        </div>
        <div class="el-company-div">
            <div class="btn_middle_red btn-middle" @click="goTo" style="margin-top: 0.9rem;">
                <button>下一步</button>
            </div>
            <div class="btn_middle_red btn-middle" @click="noBind" style="margin-top: 0.9rem;">
                <button>暂不绑定</button>
            </div>
        </div>
    </div>
	</div>
</template>

<script>
import setHeader from '../public/setHeader.vue';
import { MessageBox } from 'mint-ui';

  export default {
    data() {
      return {
      	headerTitle:'绑定企业',
        value:'',
        name:'',
        defaultResult: '',
        seac:'1',
        userInfo: '',
      };
    },
    components:{
    	setHeader,
    },
    created() {
        let that = this;
        that.userInfo = window.localStorage.getItem('userInfo');
        that.userInfo = JSON.parse(that.userInfo);
    },
    mounted() {
      // let that = this;
      // var user = Promise.resolve(this.getUserInfo())
      // user.then(
      //   function (result) { 
      //   	console.log(result);
      //   that.userInfo = result;
      // })
    },
    watch:{
    	value:function(msg){
    		let that = this
        that.name = msg
  			console.log(msg)
        that.searchCompany(msg)
	    }
	  },

    methods: {

      goTo(){
        var companyName = this.value;
        var userId = this.userInfo.uid;
        if(companyName.length<4){
          MessageBox('提示', '请输入企业全称')
          return false;
        }
        if(!companyName || companyName == undefined){
          MessageBox('提示', '请输入企业名称')
          return false;
        }else{
          this.$fetch(this.$path + '/api.php/company/getCompanyExist', {companyName, userId}).then((response) => {
            console.log(response)
            if(response.code == 2001){
              var adminName = response.data.adminName
              var tel = response.data.tel
              this.$router.push({path: '/inCompany', query: {companyName:companyName, adminName:adminName, tel:tel}}); 
            }else if(response.code == 2002){
              this.$router.push({path: '/applyCompanyAdmin', query: {companyName:companyName, adminName:adminName, tel:tel}});
            }else if(response.code == 2003){
              this.$router.push({path: '/createNewCompany', query: {companyName:companyName}});
            }else{
              MessageBox('提示', response.msg)
              return false;
            }
          })
        }
      },
    
      searchCompany:function(msg){
        let that = this;
          let seac = that.seac;
          if(seac == 0){
            document.getElementsByClassName("mint-search-list-warp")[0].style.display = 'none'
            that.seac = 1
          }else{
            console.log(33);
          let _val = that.value;
          this.$fetch(that.$path+'/api.php/company/getExistCompany',{name:msg}).then((res) => {
          	console.log(res.data)
              if(res.code == 200){
              	console.log(res.data)
                document.getElementsByClassName("mint-search-list-warp")[0].style.display = ''
                that.defaultResult = res.data
              } 
          });
          }
      },

      // 选择
      getSelect(name) {
        console.log(999)
        document.getElementsByClassName("mint-search-list-warp")[0].style.display = 'none'
        this.value = name;
        this.seac = 0;
      },
      noBind() {
        this.$router.push({path: "/userCenter"});
      },

    }
  }

</script>
<style >
/* 绑定企业标示 */
.infoDiv{
  margin-top: 0.2rem;
}
.infoDiv h4 {
  font-size: 0.36rem;
  font-weight: 500;
}

/* 绑定与否按钮 */
.el-company-div {
	display: flex;
	justify-content: space-between;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.btn-middle {
	flex: 1;
}
.btn-middle button {
	width: 2.4rem !important;
	height: 0.8rem !important;
	font-size: 0.26rem !important;
}

/* .Bind{
  margin-top:170px;
}
.Bind2{
  margin-top:40px;
}
.Bind2{
  background-color: #66b1ff;
} */
/* 搜索显示面板 */
.mint-search-list {
    overflow-y: auto;
    top: 2.72rem;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    height: 8rem;
    padding-top: 0;
}
.mint-search-list-warp{
  position: relative;
    z-index: 1;
}
/* 搜索框 */
.mint-search{
	height:50px !important;
}
/*  */
.mint-searchbar {
  z-index: 10;
}
.mint-searchbar-inner .mintui-search {
  font-size: 0.34rem;
  padding-right: 0.1rem;
}
.mint-cell-value {
    padding: 0 0.2rem;
    display: block;
    text-align: left;
    width: 100%;
    margin-right: 0;
}

.main-revie ul{
  width:100%;
  margin: 0;
  padding: 0;
}
.main-revie ul li{
  width:100%;
  float: left;
  padding-left: 10px;
  padding-bottom: 10px;
  margin-top:15px;
  border-bottom: #d8d8d8 solid 1px;
}
.main-revie ul .active{
  border-bottom: none;
}
.main-revie ul li img{
    width: 70px;
    height: 70px;
    border-radius: 35px;
    float: left;
    margin: 5px;
}


.main-right {
  float: left;
    width: 20%;

}
.main-right .el-button {
    width: 60px;
    padding: 8px 10px;
    border-radius: 0;
    color: #fff;
    background:#ee7676;
}
.el-long-user-button{
	width:100%;
	
}
</style>
